import React, { useEffect, useState } from "react";
import Header from "../../components/Header";
import { Calendar, InfiniteScroll } from "antd-mobile";
import { request } from "../../utils/request";
import ListItem from "../../components/ListItem";

const Show = () => {
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1)
  const getData = async () => {
    const resp = await request.post("/actor/list?page=" + page );
    console.log(resp.data.data);
    setList([...list, ...resp.data.data]);
    setPage(page + 1)
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div>
      <Header title="北京演出日历"></Header>
      <Calendar
        renderLabel={() => {
          return <div style={{ color: "red", fontSize: 30 }}>.</div>;
        }}
      />

      <div className="list">
        {list &&
          list.map((item, index) => {
            return <ListItem key={index} v={item}></ListItem>;
          })}
      </div>
      <InfiniteScroll loadMore={getData} hasMore={true}></InfiniteScroll>
    </div>
  );
};

export default Show;
